<!DOCTYPE html>
<html>
	<head>
	  	<meta charset="utf-8">
	  	<title></title>
	  	<meta name="renderer" content="webkit">
	  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	  	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	  	<link rel="stylesheet" href="/usercp/layui/css/layui.css" media="all">
  		<link rel="stylesheet" href="/usercp/style/admin.css" media="all">
	</head>
	<body>
		<div class="m-site-framebody">
			<div class="layui-row">
    			<div class="layui-col-md5">
					<div class="layui-form" id="site_form" lay-filter="setting" style="padding: 20px 0 0 0;">
						<div class="layui-form-item">
							<label class="layui-form-label">站点名称</label>
							<div class="layui-input-inline" style="width: 400px">
								<input type="text" name="name" required lay-verify="required" placeholder="请输入站点名称" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
				          <label class="layui-form-label">通信秘钥</label>
				          <div class="layui-input-inline" style="width: 270px">
				            <input type="text" name="token" disabled="disabled" value="" autocomplete="off" class="layui-input">
				          </div>
					        <div class="layui-input-inline">
					            <button class="layui-btn" id="token_refresh">点击重置</button>
					        </div>
				        </div>
						<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
						  <ul class="layui-tab-title">
						    <li class="layui-this">百度小程序配置</li>
						  </ul>
						  <div class="layui-tab-content">
								<div class="layui-form-item">
								<label class="layui-form-label">AppId</label>
								<div class="layui-input-inline" style="width: 400px">
									<input type="text" name="appid" required lay-verify="required" placeholder="请输入AppId" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">App Key</label>
								<div class="layui-input-inline" style="width: 400px">
									<input type="text" name="app_key" required lay-verify="required" placeholder="请输入App Key" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">App Secret</label>
								<div class="layui-input-inline" style="width: 400px">
									<input type="text" name="app_secret" required lay-verify="required" placeholder="请输入App Secret" autocomplete="off" class="layui-input">
								</div>
							</div>
						  </div>
						</div>  
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit lay-filter="form">立即提交</button>
								<button type="reset" id="reset_form" class="layui-btn layui-btn-primary">重置</button>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md7">
					<ul class="layui-timeline" style="padding: 20px 20px 0 60px;">
					  <li class="layui-timeline-item">
					    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					    <div class="layui-timeline-content layui-text">
					      <h3 class="layui-timeline-title">创建站点</h3>
					      <ul style="list-style-type:decimal;">
					        <li>找到左侧菜单[站点]下的[管理]列表</li>
					        <li>在[管理]列表中找到[创建站点]并打开</li>
					        <li>填写站点的基本信息，选择要开通的站点类型和计费方式后保存</li>
					      </ul>
					    </div>
					  </li>
					  <li class="layui-timeline-item">
					    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					    <div class="layui-timeline-content layui-text">
					      <h3 class="layui-timeline-title">配置小程序</h3>
					      <ul style="list-style-type:decimal;">
					      	<li>通过百度小程序官方平台注册小程序，若已注册忽略该步骤。<a href="https://smartprogram.baidu.com/docs/introduction/register/" target="_blank">注册链接</a></li>
					      	<li>获取百度小程序官方平台，在"平台首页-设置"中获取AppID（智能小程序ID）、App Key、App Secret（智能小程序密钥）。<a href="https://smartprogram.baidu.com/docs/introduction/register_prepare/" target="_blank">参考链接</a></li></li>
					      	<li>将获取到的小程序AppID、App Key、App Secret填入左侧表单中对应的配置项中并提交保存</li>
					      </ul>
					      
					    </div>
					  </li>
					  <li class="layui-timeline-item">
					    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					    <div class="layui-timeline-content layui-text">
					      <h3 class="layui-timeline-title">下载代码包</h3>
					      完成上述操作后，请点击 <button type="layui-btn" class="layui-btn" lay-filter="download" id="download" >下载代码包</button> 下载代码包到本地
					    </div>
					  </li>
					  <li class="layui-timeline-item">
					    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					    <div class="layui-timeline-content layui-text">
					      <h3 class="layui-timeline-title">上传至百度小程序服务器</h3>
					      上传成功后完成所有配置 <a href="/usercp/tutorial/index.html" target="_blank">上传教程</a>
					    </div>
					  </li>
					</ul>
				</div>
		</div>
		<style>
			html {
				background-color: #fff;
			}
			.m-site-framebody {
				padding: 10px 15px;
			}
			.m-site-framebody-header {
				margin-bottom: 20px;
				padding-bottom: 10px;
				font-size: 14px;
				border-bottom: 1px solid #e6e6e6;
			}
			.layui-table, .layui-table-view {
				margin: 0;
			}
		</style>
		  <script src="/usercp/layui/layui.js"></script>
		<script>
		layui.use(['form','upload'], function(){
		  	var form = layui.form;
		  	var $ = layui.$;
		  	var site_id = getQueryString('site_id');
		  	var formdata = {};

		  	var upload = layui.upload;
	        var img = '';
	        var uploadInst = upload.render({
	          elem: '#logo' //绑定元素
	          ,url: '/usercp/upload/upload' //上传接口
	          ,done: function(res){
	            //上传完毕回调
	            upload_path = res.data;
	            img = '<img src="'+ res.data +'" width="38px" heigth="38px" />';
	            $('#img_box').html(img);
	            form.val('setting',{
	              'logo':res.data
	            })
	          }
	          ,error: function(){
	            //请求异常回调
	            layer.msg(res.msg, {
	              offset: '50px'
	              ,icon: 2
	              ,anim: 6
	              ,time: 1000
	            }, function(){});
	          }
	        });
		  	//获取原始数据
		  	$.ajax({
                url: '/usercp/site/detail',
                type: "GET",
                data: {'id' : site_id},
                dataType: 'json',
                success: function (res) {
                	if(res.code == 200){
	                	formdata = res.data;
	                	form.val('setting',{
					  		'name':formdata.name,
					  		'token':formdata.token,
					  		'desc':formdata.desc,
					  		'appid':formdata.appid,
					  		'app_key':formdata.app_key,
					  		'app_secret':formdata.app_secret,
					  		'phone':formdata.phone,
					  		'logo':formdata.logo
					  	})
					  	img = '<img src="'+ formdata.logo +'" width="38px" heigth="38px" />';
              			$('#img_box').html(img);
					}
                }
            })
            $('#reset_form').click(function(){
            	layer.confirm('是否确认重置表单，没有保存的内容将会丢失？', function(index){
	              	form.val('setting',{
				  		'name':formdata.name,
				  		'token':formdata.token,
				  		'desc':formdata.desc,
				  		'appid':formdata.appid,
				  		'app_key':formdata.app_key,
				  		'app_secret':formdata.app_secret
				  	})
            		layui.form.render();
	              	layer.close(index);
	            })
            })
            $('#download').click(function(){
		  		$.get('/usercp/site/get_package', {'site_id':site_id,'type':'baidu'}, function (data) {
	                if(data.code == 200){
	                	var a = document.createElement('a');
	                	a.href = data.data;
	                	$("body").append(a);
	                	a.click();
	                	$(a).remove();
	                	//按钮变灰
	                }else{
	                	layer.msg(data.msg, {
		                    offset: '15px'
		                    ,icon: 2
		                    ,time: 2000
		                }, function(){});
	                }
	            })
		  	})
		  	$('#token_refresh').click(function(){
		  		layer.confirm('重置后需要重新下载小程序代码包并上传至相应服务器，是否确认重置？', function(index){
	              $.get('/usercp/site/get_token', {'site_id':site_id}, function (data) {
	                  var html = "";
	                  if(data.data != null){
	                      html = data.data;
	                    $("input[name='token']").val(html);
	                    //append后必须从新渲染
	                    form.render('select');
	                 }
	              	layer.close(index);
	            })
	          });
	        })
		  	
		  	// 监听提交，测试用例
		  	form.on('submit(form)', function(data){
		    	data.field.id = site_id;
		    	var field = data.field;
		    	$.ajax({
	                url: '/usercp/site/setting',
	                type: "POST",
	                data: field,
	                dataType: 'json',
	                success: function (res) {
	                	if (res.code == 0){
		                    layer.msg(res.msg, {
		                      offset: '50px'
		                      ,icon: 2
		                      ,anim: 6
		                      ,time: 1000
		                    }, function(){});
		                    return false;
		                  }else{
		                    layer.msg('修改成功！', {
		                      offset: '15px'
		                      ,icon: 1
		                      ,time: 1000
		                    }, function(){
			                });
		                }
		                return false;
	                }
	            })
		  	});
		  	function getQueryString(name) { 
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
				var r = window.location.search.substr(1).match(reg); 
				if (r != null) return unescape(r[2]); return null; 
			} 
		});
		</script>
	</body>
</html>
